<template>
	<div class="xtx-cart-page">
		<div class="container m-top-20">
			<div class="cart">
				<table>
					<thead>
						<tr>
							<th width="120">
								<el-checkbox :model-value="cartStore.isSelectedAll" @change="cartStore.handlerAllSelect" />
							</th>
							<th width="400">商品信息</th>
							<th width="220">单价</th>
							<th width="180">数量</th>
							<th width="180">小计</th>
							<th width="140">操作</th>
						</tr>
					</thead>
					<!-- 商品列表 -->
					<tbody>
						<tr v-for="i in cartStore.cartList" :key="i.id">
							<!-- 单选框 -->
							<td>
								<el-checkbox :model-value="i.selected" @change="isSelected => handlerSingleCheck(i, isSelected)" />
								<!-- <el-checkbox v-model="i.selected" /> -->
							</td>
							<!-- 商品信息 -->
							<td>
								<div class="goods">
									<RouterLink :to="`/goods-detail/${i.id}`">
										<img :src="i.picture" />
									</RouterLink>
									<div>
										<p class="name ellipsis">{{ i.name }}</p>
									</div>
								</div>
							</td>
							<!-- 单价 -->
							<td class="tc">
								<p>&yen;{{ i.price }}</p>
							</td>
							<!-- 数量 -->
							<td class="tc">
								<!-- <el-input-number v-model="i.count" /> -->
								<el-input-number
									:min="1"
									:model-value="i.count"
									@change="currentValue => goodsNumChange(i, currentValue)"
								/>
							</td>
							<td class="tc">
								<p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
							</td>
							<td class="tc">
								<p>
									<el-popconfirm
										title="确认删除吗?"
										confirm-button-text="确认"
										cancel-button-text="取消"
										@confirm="cartStore.removeCartGoods(i.skuId)"
									>
										<template #reference>
											<a href="javascript:;">删除</a>
										</template>
									</el-popconfirm>
								</p>
							</td>
						</tr>
						<tr v-if="cartStore.cartList.length === 0">
							<td colspan="6">
								<div class="cart-none">
									<el-empty description="购物车列表为空">
										<el-button type="primary" @click="$router.push('/home')"> 随便逛逛 </el-button>
									</el-empty>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 操作栏 -->
			<div class="action">
				<div class="batch">
					共 {{ cartStore.cartGoodsSum }} 件商品，已选择 {{ cartStore.selectedGoodsSum }} 件，商品合计：
					<span class="red">¥ {{ cartStore.selectedGoodsPrice.toFixed(2) }} </span>
				</div>
				<div class="total">
					<el-button size="large" type="primary" @click="$router.push('/checkout')">下单结算</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ShopCart',
	}
</script>

<script setup>
	import { useCartStore } from '@/stores/cart'

	const cartStore = useCartStore()

	// 单选框 - 当绑定值变化时触发的事件
	function handlerSingleCheck(skuId, isSelected) {
		cartStore.handlerSingleSelect(skuId, isSelected)
	}

	// 购物车中商品数量change
	function goodsNumChange(goodsItem, currentValue) {
		if (!currentValue) currentValue = 1
		cartStore.handlerUpdateCartGoodsCount(goodsItem, currentValue)
	}
</script>

<style scoped lang="scss">
	.xtx-cart-page {
		margin-top: 20px;

		.cart {
			background: #fff;
			color: #666;

			table {
				border-spacing: 0;
				border-collapse: collapse;
				line-height: 24px;

				th,
				td {
					padding: 10px;
					border-bottom: 1px solid #f5f5f5;

					&:first-child {
						text-align: left;
						padding-left: 30px;
						color: #999;
					}
				}

				th {
					font-size: 16px;
					font-weight: normal;
					line-height: 50px;
				}
			}
		}

		.cart-none {
			text-align: center;
			padding: 120px 0;
			background: #fff;

			p {
				color: #999;
				padding: 20px 0;
			}
		}

		.tc {
			text-align: center;

			a {
				color: $xtxColor;
			}

			.xtx-numbox {
				margin: 0 auto;
				width: 120px;
			}
		}

		.red {
			color: $priceColor;
		}

		.green {
			color: $xtxColor;
		}

		.f16 {
			font-size: 16px;
		}

		.goods {
			display: flex;
			align-items: center;

			img {
				width: 100px;
				height: 100px;
			}

			> div {
				width: 280px;
				font-size: 16px;
				padding-left: 10px;

				.attr {
					font-size: 14px;
					color: #999;
				}
			}
		}

		.action {
			display: flex;
			background: #fff;
			margin-top: 20px;
			height: 80px;
			align-items: center;
			font-size: 16px;
			justify-content: space-between;
			padding: 0 30px;

			.xtx-checkbox {
				color: #999;
			}

			.batch {
				a {
					margin-left: 20px;
				}
			}

			.red {
				font-size: 18px;
				margin-right: 20px;
				font-weight: bold;
			}
		}

		.tit {
			color: #666;
			font-size: 16px;
			font-weight: normal;
			line-height: 50px;
		}
	}
</style>
